<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}
			
			body {
				background: url("img/register_bg.png") no-repeat center;
				padding-top: 25px;
			}
			
			.rg_layout {
				width: 900px;
				height: 500px;
				border: 8px solid #EEEEEE;
				background-color: white;
				/*让div水平居中*/
				margin: auto;
			}
			
			.rg_left {
				/*border: 1px solid red;*/
				float: left;
				margin: 15px;
			}
			
			.rg_left>p:first-child {
				color: #FFD026;
				font-size: 20px;
			}
			
			.rg_left>p:last-child {
				color: #A6A6A6;
				font-size: 20px;
			}
			
			.rg_center {
				float: left;
				/* border: 1px solid red;*/
			}
			
			.rg_right {
				/*border: 1px solid red;*/
				float: right;
				margin: 15px;
			}
			
			.rg_right>p:first-child {
				font-size: 15px;
			}
			
			.rg_right p a {
				color: pink;
			}
			
			.td_left {
				width: 100px;
				text-align: right;
				height: 45px;
			}
			
			.td_right {
				padding-left: 50px;
			}
			
			#username,
			#password,
			#email,
			#name,
			#tel,
			#birthday,
			#checkcode {
				width: 251px;
				height: 32px;
				border: 1px solid #A6A6A6;
				/*设置边框圆角*/
				border-radius: 5px;
				padding-left: 10px;
			}
			
			#checkcode {
				width: 110px;
			}
			
			#img_check {
				height: 32px;
				vertical-align: middle;
			}
			
			#btn_sub {
				width: 150px;
				height: 40px;
				background-color: #FFD026;
				border: 1px solid #FFD026;
			}
			
			.error {
				color: red;
			}
			
			#td_sub {
				padding-left: 150px;
			}
		</style>
		<script>
			/*
						        分析：
						            1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
						                如果都为true，则监听器方法返回true
						                如果有一个为false，则监听器方法返回false

						            2.定义一些方法分别校验各个表单项。
						            3.给各个表单项绑定onblur事件。
						     */

			window.onload = function() {
				//1.给表单绑定onsubmit事件
				document.getElementById("btn_sub").onsubmit = function() {
					return checkUsername() && checkPassword();
				}

				//给用户名和密码框分别绑定离焦事件

			}

			//校验用户名
			function checkUsername() {
				/* 1. 获取到用户输入的值*/
				var val_username = document.getElementById("username").value;
				/* 2. 对值进行校验*/
				var reg = /^\w*+[a-zA-Z]+\w*+[0-9]+\w*$/;
				var flag;
				if(val_username.length >= 6 && val.userName.length <= 12) {
					flag = reg.test(val_username);
				} else {
					return false;
				}
				
				/* 3. 对用户进行提示.*/
				if (flag){
					
				}
				return flag;
			}

			//校验密码
			function checkPassword() {
				//1.获取用户名的值
				var password = document.getElementById("password").value;
				//2.定义正则表达式
				var reg_password = /^\w{6,12}$/;
				//3.判断值是否符合正则的规则
				var flag = reg_password.test(password);
				//4.提示信息
				var s_password = document.getElementById("s_password");

				if(flag) {
					//提示绿色对勾
					s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
				} else {
					//提示红色用户名有误
					s_password.innerHTML = "密码格式有误";
				}
				return flag;
			}
		</script>
	</head>

	<body>

		<div class="rg_layout">
			<div class="rg_left">
				<p>新用户注册</p>
				<p>USER REGISTER</p>

			</div>

			<div class="rg_center">
				<div class="rg_form">
					<!--定义表单 form-->
					<form action="#" id="form" method="get">
						<table>
							<tr>
								<td class="td_left"><label for="username">用户名</label></td>
								<td class="td_right">
									<input type="text" name="username" id="username" placeholder="请输入用户名">
									<!-- 每一个需要被提示的行后面添加一个块标签进行 -->
									<span id="s_username" class="error"></span>
								</td>
							</tr>

							<tr>
								<td class="td_left"><label for="password">密码</label></td>
								<td class="td_right">
									<input type="password" name="password" id="password" placeholder="请输入密码">
									<span id="s_password" class="error"></span>
								</td>
							</tr>

							<tr>
								<td class="td_left"><label for="email">Email</label></td>
								<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
							</tr>

							<tr>
								<td class="td_left"><label for="name">姓名</label></td>
								<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
							</tr>

							<tr>
								<td class="td_left"><label for="tel">手机号</label></td>
								<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
							</tr>

							<tr>
								<td class="td_left"><label>性别</label></td>
								<td class="td_right">
									<input type="radio" name="gender" value="male" checked> 男
									<input type="radio" name="gender" value="female"> 女
								</td>
							</tr>

							<tr>
								<td class="td_left"><label for="birthday">出生日期</label></td>
								<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
							</tr>

							<tr>
								<td class="td_left"><label for="checkcode">验证码</label></td>
								<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
									<img id="img_check" src="img/verify_code.jpg">
								</td>
							</tr>

							<tr>
								<td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
							</tr>
						</table>

					</form>

				</div>

			</div>

			<div class="rg_right">
				<p>已有账号?
					<a href="#">立即登录</a>
				</p>
			</div>

		</div>

	</body>

</html>